<template>
	<Header></Header>
	<div class='course-filter'>
		<div class="filter-main">
			<div class='filter-item'>
				<div class='item-title'>
					课程方向：
					<el-icon>
						<ArrowRightBold szie="20" />
					</el-icon>
				</div>
				<ul class="course-ulBox">
					<li :class="searchData.entity.firstCategory == ''?'filter-all':''" @click="evtFirst('')">全部</li>
					<li v-for="item in firstList" :key="item.id" @click="evtFirst(item.id)"
						:class="searchData.entity.firstCategory == item.id?'filter-all':''">{{item.categoryName}}</li>
					<!-- <li>前端开发</li> -->

				</ul>
			</div>
			<div class='filter-item'>
				<div class='item-title'>课程分类：
					<el-icon>
						<ArrowRightBold />
					</el-icon>
				</div>
				<ul class="course-ulBox">
					<li :class="searchData.entity.secondCategory == ''?'filter-all':''" @click="evtSecond('')">全部</li>
					<li v-for="item in secondList" :key="item.id" @click="evtSecond(item.id)"
						:class="searchData.entity.secondCategory == item.id?'filter-all':''">{{item.categoryName}}</li>
				</ul class="course-ulBox">
			</div>
			<div class='filter-item'>
				<div class='item-title'>课程难度：
					<el-icon>
						<ArrowRightBold />
					</el-icon>
				</div>
				<ul>
					<li :class="searchData.entity.courseLevel == ''?'filter-all':''" @click="courseLevelChange('')">全部</li>
					<li v-for="item in levelList" :key="item.id" @click="courseLevelChange(item.id)"
						:class="searchData.entity.courseLevel == item.id?'filter-all':''">
						{{ item.name }}
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class='course-list'>
		<div class='list-main'>
			<div class='list-t'>
				<ul>
					<li v-for="item in courseFilter" :key="item.id" @click="evtFilter(item.id) ">
						<div :class="currentIdx == item.id ? 'activeColor' : ''">
							{{ item.name }}
						</div>
						<div class='caret' v-if="item.id==4">
							<el-icon :size='8'>
								<CaretTop :color="searchData.entity.sortBy == 'price-asc' ? 'rgb(56, 143, 255)':''" />
							</el-icon>
							<el-icon :size='8'>
								<CaretBottom :color="searchData.entity.sortBy == 'price-desc' ? 'rgb(56, 143, 255)' : ''" />
							</el-icon>
						</div>
					</li>
				</ul>
				<div>
					<!-- 'isFree' -->
					<el-checkbox  v-model="radio.isFree" @change="tabCourse('isFree')" label="免费课程" />
					<!-- 'isMember' -->
					<el-checkbox  v-model="radio.isMember" @change="tabCourse('isMember')" label=" 会员专享课程" />
				</div>
			</div>
			<ul class='list-c'>
				<li 
				v-for="item in courseList" 
				:key="item.id"
				@click=goDetail(item.id)
				>
					<img :src="item.courseCover" />
					<div class='course-content'>
						<h3>{{ item.courseName }}</h3>
						<div>{{courseTypeFn( item.courseLevel )}} · {{ item.clicks }}人报名</div>
						<div class='price'>
							<div class='price-vip' v-if="item.discountPrice>0">会员专享</div>
							<div class='price-total'> {{ item.discountPrice>0?('¥'+item.discountPrice):('限时免费') }}</div>
						</div>
					</div>
				</li>
			</ul>
			<div class='list-b'>
				<!-- 分页没完善 -->
				<el-pagination 
				page-size="8" 
				background 
				layout="prev, pager, next"
				 :total="courseTotal" 
				 @current-change="currentChange"
				 />
			</div>
		</div>
	</div>
	<Footer></Footer>
</template>


<script setup>
//引入组件
import Header from '@/components/common/Header.vue'
import Footer from '@/components/common/Footer.vue'
//element
import { CaretTop, CaretBottom, ArrowRightBold  } from '@element-plus/icons-vue'
//mixin
import courseType from '@/mixins/courseType.js'
let { courseTypeFn } = courseType();
//api
import {getFirstCategorys,getSecondCategorys,courseSearch} from '@/utils/api/course'
import { nextTick, onBeforeMount, reactive } from 'vue';
// 一级数据
const firstList = ref([])
//二级分类的数据
const secondList = ref([]);


//搜索查询课程的初始数据
const searchData = reactive({
		pageNum:1,
		pageSize:8,
        entity :{
            firstCategory:'',  //一级
            secondCategory:'', //二级
            courseLevel:'' ,//等级
						sortBy:"",
					isMember:'', 
					isFree:''
        }
})

// 三级课程数据 课程数据
const courseList = ref([]);
// 课程数据
const courseTotal =ref([])
// 课程难度
const levelList = ref([
        {id:1,name: '初阶'}, 
        {id:2,name: '中阶'} , 
        {id:3,name: '高阶'} 
])
onBeforeMount(()=>{

    // 获取一级分类
    getFirstCategorys().then(res=>{
        firstList.value = res.data.list;
    })
    // 获取二级分类 第一次查全部
    secondCategorys({categoryId:-1})
    // 获取三级分类
    getCourseSearch(searchData)
})

        // 点击一级 获取二级分类 第一次查全部
const secondCategorys = (params)=>{
        getSecondCategorys(params).then(res=>{
            console.log('erji',res);
        secondList.value = res.data.list
    })
}
    // 查询课程
const getCourseSearch = async (params)=>{
    console.log('三级菜单参数',params);
   await courseSearch(params).then(res=>{
		courseList.value = res.data.pageInfo.list;
		//课程总数量
		courseTotal.value = res.data.pageInfo.total;
        console.log('三级菜单课程',res);
    console.log(courseList.value.length);
    
      let cbk =  courseList.value.find((v)=>v.id == searchData.entity.secondCategory ) 
      console.log('cbk',cbk);
      
      //存在不管他
    // if( cbk == undefined ){
    //     searchData.entity.secondCategory = -1
    // }
        
    })
}

// +点击一级分类
const evtFirst = (id)=>{


    if(!id){
        secondCategorys({categoryId:-1})
    }else {
        secondCategorys({
        categoryId:id
    })
    }
    // 查询课程
    searchData.entity.firstCategory = id,
    getCourseSearch(searchData)
}
// 点击二级分类
const evtSecond = (id)=>{
        // 查询课程
        console.log('二级分类ID',id);
        searchData.entity.secondCategory = id
   getCourseSearch(searchData)
}

// 点击切换初中高
const courseLevelChange = (id)=>{
	console.log(id);

    searchData.entity.courseLevel = id
    getCourseSearch(searchData)
}

// 定义数据过滤条件
const currentIdx = ref(1)
const courseFilter =[
	{ id: 1, name: '综合', status:'' },
	{ id: 2, name: '最新课程', status: 'time-desc' },
	{ id: 3, name: '最多购买', status:'purchase-desc' },
	{ id: 4, name: '价格',status:{
		up:'price-asc',
		down:'price-desc'
	} }
]

// 综合
const evtFilter = (id)=>{
	currentIdx.value = id;
	const filterItemID = courseFilter.find(item => item.id === id);
			if(id<=3){
					if(id == 1){
						radio.value.isFree = false;
						radio.value.isMember = false;
					}

				searchData.entity.sortBy = filterItemID.status;
			}else{
				if (searchData.entity.sortBy == filterItemID.status.up){
					searchData.entity.sortBy = filterItemID.status.down
				}else{
					searchData.entity.sortBy = filterItemID.status.up
				}
			}
	getCourseSearch(searchData)
}
const radio = ref({
	isFree: false,
	isMember: false
});
//是否免费
const tabCourse = (e)=>{
	if(e== 'isFree'){
		radio.value.isMember = false;
	} else if (e == 'isMember') {
		radio.value.isFree = false;
	}
	searchData.entity.isFree = radio.value.isFree ? 1 : ''
	searchData.entity.isMember = radio.value.isMember ? 1 : ''
	getCourseSearch(searchData)
}

// 分页
const currentChange = (e)=>{
	console.log('分页',e);
	searchData.pageNum = e;
	// 查询课程
	getCourseSearch(searchData)
}
// import { router} from 'vue-router'
let router = useRouter()
// 跳转课程详情
const  goDetail = (id)=>{
	router.push({
		path:'/course/detail',
		query:{
			id
		}
	})
} 


</script>

<style scoped>
.course-filter{
	width: 100%;
	height: 197px;
	background: #F3F5F9;
}
.filter-main{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 1000px;
	height: 197px;
	margin: 0 auto;
}
.filter-item{
	display: flex;
	align-items: center;
}
.item-title{
	/* margin-left: 20px; */
	font-size: 14px;
	font-weight: bold;
	color: #333333;
 align-items: center;
 display: flex;
}
.filter-item ul{
    flex: 1;
	display: flex;
	align-items: center;
    flex-wrap: wrap;
}
.filter-item ul :nth-child(1){
    font-weight: 700;
}

/* 项目太多放不下 */
.filter-main :nth-child(2){
    .item-title{
        align-self: start;
        margin-top: 5px;
    }
    ul {
        flex-direction: reverse;
        /* background-color: #12df2d; */
        min-height: 90px;
        /* 让单行盒子取消flex 副作用 */
        align-items: first baseline;

    /* li{
        margin-bottom: 10px;
    } */

    }
    /* 让UL只有的单行盒子取消flex 副作用 */
    ul::after{
            flex: auto;
        }

}

.filter-item ul li{
	min-width: 30px;
    padding: 0 10px;
    margin:  0 10px;
	line-height: 30px;
	font-size: 14px;
	font-weight: 400;
	color: #515759;
	text-align: center;
    border-radius: 5px;
}
.filter-item ul li:hover{
    cursor: pointer;
	color: #388fff;
    background: rgba(44,128,255,.1);
}

.filter-item ul li.filter-all{
	/* min-width: 30px;
    padding: 0 10px; */
	line-height: 30px;
	text-align: center;
	color: #388fff;
    font-size: 14px;
    background: rgba(44,128,255,.1);
    border-radius: 5px;
}

.course-list{
	padding: 50px 0;
	background: #fff;
}
.list-main{
	width: 1000px;
	margin: 0 auto;
}
.list-t{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.list-t ul{
	/* display: flex; */
	float: left;
}

.list-t ul li{
	float: left;
	cursor: pointer;
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: 400;
	color: #515759;
	padding: 0 10px;
}

.list-t ul li:not(:last-child)::after{
		content: '|';
		/* margin: 0 10px; */
		padding-left: 10px ;
}

.activeColor {
	color: #388fff;
}
.caret{
	display: flex;
	flex-direction: column;
}


.list-c{
    width: 1000px;
	display: flex;
	justify-content: space-between;
    justify-content: baseline;
	flex-wrap: wrap;
}
    /* 让最后不满整行的盒子默认靠右排列 不影响布局 */
.list-c::after{
    content: "";
    flex: auto;
}


.list-c li {
	float: left;
	margin-top: 38px;
	width: 240px;
	height: 275px;
	background: #FFFFFF;
	border-radius: 5px;
	box-shadow: 1px 1px 10px rgb(27 39 94 / 40%)

}

.list-c li:hover{
    transform: translateY(-2%);
    transition: all 0.3s;

}

    /* 让最后不满整行的盒子默认靠右排列 不影响布局 手动计算margin 不能超出总宽度 */
.list-c:nth-child(2n) li ,
.list-c:nth-child(3n) li {
 margin-right: 10px;
}



.list-c li img{
	border-radius: 5px 5px 0 0;
	width: 240px;
	height: 153px;
}
.course-content{
	padding: 7px 16px;
}
.course-content h3{
	font-size: 12px;
	color: #333333;
}
.course-content >div{
	padding: 7px 0;
	font-size: 12px;
	color: #808080;
}
.price{
	display: flex;
}
.price-vip{
	width: 64px;
	height: 16px;
	margin-right: 3px;
	text-align: center;
	color: #fff;
	background: linear-gradient(90deg, #FF928E 0%, #FE7062 99%);
	border-radius: 16px 0px 16px 0px;
}
.price-total{
	font-size: 12px;
	color: #FF727F;
    font-weight: bold;
}
.list-b{
	padding-top: 50px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>